<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue的初识</title>
	</head>
	<body>
		<div id="app">
			<div class="goods">{{goods}}</div>
			<div class="sum">{{sum()}}</div>
			<div class="val1">{{val1}}</div>
			<div class="val2">{{val2}}</div>
		</div>
	</body>
</html>
<script src="../vue@3.2.23.js"></script>
<script>
	const {createApp,ref} = Vue;
	const app = createApp({
		data(){
			return{
				goods:'这是一个商品',
				val1:1,
				val2:2
			}
		},
		//方法
		method:{
			sum(){
				return this.val1 + this.val2
			}
		}
	});
	//mvvm的思维模型，model数据,v:view视图，mvvm:数据视图连接层
	const vm = app.mount("#app")
</script>